<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link href="https://gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.80.0" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>TypeScript入门 &middot; K J</title>
  <meta name="description" content="" />

  
  <link type="text/css" rel="stylesheet" href="http://kartjim.gitee.io/hugo/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="http://kartjim.gitee.io/hugo/css/poole.css">
  <link type="text/css" rel="stylesheet" href="http://kartjim.gitee.io/hugo/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="http://kartjim.gitee.io/hugo/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="icon" href="/hugo/favicon.png">
  
  
</head>

  <body class="theme-base-09 ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="http://kartjim.gitee.io/hugo/"><h1>K J</h1></a>
      <p class="lead">
       kart jim`blog 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="http://kartjim.gitee.io/hugo/">Home</a> </li>
        <li><a href="https://blog.csdn.net/qq_46590483?spm=1001.2100.3001.5343"> CSDN </a></li><li><a href="https://github.com/can-dy-jack"> Github </a></li><li><a href="https://www.cnblogs.com/kartjim"> 博客园 </a></li>
      </ul>
    </nav>

    <p>Copyright 2021 © kart jim</p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>TypeScript入门</h1>
  <time datetime=2020-12-17T23:04:30Z class="post-date">Thu, Dec 17, 2020</time>
  <h1 id="typescript-part01">TypeScript-part01</h1>
<h2 id="typescript介绍">TypeScript介绍</h2>
<h3 id="写在前面">写在前面</h3>
<p><em>程序运行的一般步骤：</em></p>
<ol>
<li>解析程序：程序解析为AST（抽象句树法-abstract syntax tree）；</li>
<li>编译：将AWT编译成为字节码；</li>
<li>运行：计算字节码。</li>
</ol>
<h3 id="但是对于ts而言">但是对于TS而言：</h3>
<p>要先用编译器编译为JavaScript，然后执行以上步骤！</p>
<h3 id="ts与js区别">TS与JS区别</h3>
<blockquote>
<p>JavaScript是动态绑定类型；
TypeScript是静态绑定类型。</p>
</blockquote>
<blockquote>
<p>JavaScript是弱类型语言；
TypeScript是渐进式类型语言。</p>
</blockquote>
<blockquote>
<p>JavaScript会自动转换类型；
TypeScript会检查类型，并报错。</p>
</blockquote>
<h2 id="typescript配置">TypeScript配置</h2>
<ul>
<li>新建一个文件夹</li>
<li>初始化npm：</li>
</ul>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm init
</code></pre></div><ul>
<li>安装TSC、TSLint、NodeJS的类型声明</li>
</ul>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install --save-dev typescript tslint @types/node
</code></pre></div><h3 id="最好安装一下全局">最好安装一下全局*</h3>
<h4 id="locally-in-your-project">Locally in your project.</h4>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install -D typescript
npm install -D ts-node
</code></pre></div><h4 id="or-globally-with-typescript">Or globally with TypeScript.</h4>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">npm install -g typescript
npm install -g ts-node
</code></pre></div><h2 id="typescript创建一个简单的程序">TypeScript创建一个简单的程序</h2>
<ol>
<li>在根目录下新建tsconfig.json 文件，写入：</li>
</ol>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-json" data-lang="json">{
	<span style="color:#f92672">&#34;compilerOptions&#34;</span>: {
		<span style="color:#f92672">&#34;lib&#34;</span>: [<span style="color:#e6db74">&#34;es6&#34;</span>],
		<span style="color:#f92672">&#34;module&#34;</span>: <span style="color:#e6db74">&#34;commonjs&#34;</span>,
		<span style="color:#f92672">&#34;outDir&#34;</span>: <span style="color:#e6db74">&#34;dist&#34;</span>,
		<span style="color:#f92672">&#34;sourceMap&#34;</span>: <span style="color:#66d9ef">true</span>,
		<span style="color:#f92672">&#34;strict&#34;</span>: <span style="color:#66d9ef">true</span>,
		<span style="color:#f92672">&#34;target&#34;</span>: <span style="color:#e6db74">&#34;es6&#34;</span>
	},
	<span style="color:#f92672">&#34;include&#34;</span>: [
	<span style="color:#e6db74">&#34;src&#34;</span>
	]
}
</code></pre></div><p>具体配置请看<a href="https://www.typescriptlang.org/docs/handbook">官方文档</a></p>
<ol start="2">
<li>新建tslint.json文件，写入：</li>
</ol>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-json" data-lang="json">{
    <span style="color:#f92672">&#34;defaultSeverity&#34;</span>: <span style="color:#e6db74">&#34;error&#34;</span>,
    <span style="color:#f92672">&#34;extends&#34;</span>: [
        <span style="color:#e6db74">&#34;tslint:recommended&#34;</span>
    ],
    <span style="color:#f92672">&#34;rules&#34;</span>: {
        <span style="color:#f92672">&#34;semicolon&#34;</span>: <span style="color:#66d9ef">false</span>,
        <span style="color:#f92672">&#34;trailing-comma&#34;</span>: <span style="color:#66d9ef">false</span>
    }
}
</code></pre></div><p>或者使用命令行：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">tslint --init
</code></pre></div><ol start="3">
<li>最后新建src文件夹及其之下的index.ts
试着写入代码：</li>
</ol>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-typescript" data-lang="typescript"><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;Hello TypeScript!&#39;</span>)
</code></pre></div><ol start="4">
<li>编译： tsc ./src/index.ts
之后文件夹src下会出现编译好的js文件。</li>
<li>运行（node）：node ./src/index.js</li>
</ol>
<p>成功运行第一个TypeScript项目！</p>
<h2 id="开发工具">开发工具</h2>
<ul>
<li><a href="https://www.npmjs.com/package/ts-node">ts-node</a>
更快编译、运行</li>
<li>typescript-node-starter（github上面搜）
脚手架工具</li>
</ul>
<!-- raw HTML omitted -->
</div>


    </main>

    
      
    
  </body>
</html>
